<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内元素和块级元素的相互转换</title>

        <style>
            /* display:inline 转为行内元素
               display:block  转为块级元素
            */
            .djjr {
                /* 转为块级元素 */
                display: block;
                background-color: blue;
                width: 200px;
                height: 60px;
                color: white;
                text-align: center;
                line-height: 60px;
                text-decoration: none;
                /* 圆角 */
                border-radius: 6px;
            }
            .djjr:hover {
                background-color: orange;
            }

            span {
                /* 转成行内块 */
                background-color:  purple;
                padding: 8px 20px;
                display: inline-block;
                margin-top: 30px;
                color: white;
            }
        </style>
    </head>
    <body>
        <a href="" class="djjr">点击进入</a>

        <div>
            <span>我是span</span>
            <span>我是span</span>
            <span>我是span</span>
        </div>
    </body>
</html>